<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改资产盘点')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">

    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <h4 class="form-header h4">资产盘点范围
                <div align="right">
                <a class="btn btn-success btn " href="javascript:void(0)" onclick="exportReport()"><i class="fa fa fa-bar-chart"></i> 下载报告</a>
                </div>
            </h4>
            <div class="row">
                <!--<div class="col-sm-3">-->
                    <!--<div class="ibox">-->
                        <!--<div class="ibox-content">-->
                            <!--<h4>已盘/未盘</h4>-->
                            <!--<h3><span th:text="${finash}"></span>/<span th:text="${nofinash}"></span></h3>-->
                            <!--<div class="text-center">-->
                                <!--<div id="sparkline8"></div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-pie-chart_assets"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-bar-dept"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label class="control-label h5"><strong>盘点编号：</strong></label>
                        <!--<div class="col-sm-8">-->
                            <label class="control-label h5">
                                <span th:text="${assetsCheck.checkNo}"></span>
                            </label>
                        <!--</div>-->
                    </div>
                    <div class="form-group">
                        <label class="control-label h5"><strong>盘点名称：</strong></label>
                        <!--<div class="col-sm-8">-->
                            <label class="control-label h5">
                                <span th:text="${assetsCheck.checkName}"></span>
                            </label>
                        <!--</div>-->
                    </div>
                    <div class="form-group">
                        <label class="control-label h5"><strong>盘点时间：</strong></label>
                        <!--<div class="col-sm-8">-->
                            <label class="control-label h5">
                                <span th:text="${#dates.format(assetsCheck.checkTime, 'yyyy-MM-dd')}"></span>
                            </label>
                        <!--</div>-->
                    </div>
                    <div class="form-group">
                        <label class="control-label h5"><strong>资产类别：</strong></label>
                        <!--<div class="col-sm-8">-->
                            <label class="control-label h5">
                                <span th:text="${type}"></span>
                             </label>
                        <!--</div>-->
                    </div>
                    <div class="form-group">
                        <label class="control-label h5"><strong>资产状态：</strong></label>
                        <!--<div class="col-sm-8">-->
                            <label class="control-label h5">
                                <span th:text="${status}"></span>
                            </label>
                        <!--</div>-->
                    </div>
                    <div class="form-group">
                        <label class="control-label h5"><strong>盘点部门：</strong></label>
                        <!--<div class="col-sm-8">-->
                            <label class="control-label h5">
                                <span th:text="${assetsCheck.checkDeptsName}"></span>
                            </label>
                        <!--</div>-->
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">需要盘点的资产</h4>
            <div class="row">
                <div class="col-sm-12">
                    <form id="formId">
                        <input name="checkId" th:field="*{assetsCheck.checkId}" type="hidden">
                        <div class="select-list">
                            <ul>
                                <li>
                                    <label>资产编号：</label>
                                    <input type="text" name="assetsId"/>
                                </li>
                                <li>
                                    <label>SN号：</label>
                                    <input type="text" name="assetsSn"/>
                                </li>
                                <li>
                                    <label>使用人：</label>
                                    <input type="text" name="userName"/>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                    <!--<button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>-->
                    <!--<button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>-->
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>

    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: peity-js" />
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var barChart = echarts.init(document.getElementById("echarts-bar-dept"));
        var pieChart_assets = echarts.init(document.getElementById("echarts-pie-chart_assets"));
        $(document).ready(function () {
            var nofinash = [[${nofinash}]];
            var finash = [[${finash}]];
//            $("#sparkline8").sparkline([finash, nofinash], {
//                type: 'pie',
//                height: '140',
//                width: '140',
//                sliceColors: ['#ed5565', '#F5F5F5']
//            });
            //资产盘点情况
            var pieoption_assets = {
                title : {
                    text: '盘点总数:'+(nofinash+finash),
                    subtext: '',
                    x:'right'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['已盘('+finash+')','未盘('+nofinash+')']
                },
                calculable : true,
                series : [
                    {
                        name:'盘点情况',
                        type:'pie',
                        radius : '50%',
                        center: ['50%', '57%'],
                        data:[
                            {value:finash, name:'已盘('+finash+')'},
                            {value:nofinash, name:'未盘('+nofinash+')'}
                        ],
                        label: {
                            normal: {
                                show: true,//开启显示
                                position: 'top',//柱形上方
                                textStyle: { //数值样式
                                    color: '#8A2BE2'
                                }
                            }
                        }
                    }
                ]
            };
            pieChart_assets.setOption(pieoption_assets);
            $(window).resize(pieChart_assets.resize);


            var assetsTypeDataList = [[${assetsTypeDataList}]];
            var assetsTypeValueList1 = [[${assetsTypeValueList1}]];
            var assetsTypeValueList2 = [[${assetsTypeValueList2}]];
            var baroption = {
                title : {
                    text: '资产类别'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['已盘','未盘']
                },
                grid:{
                    x:30,
                    x2:40,
                    y2:24
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : assetsTypeDataList
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'已盘',
                        type:'bar',
                        data:assetsTypeValueList1,
                        label: {
                            normal: {
                                show: true,//开启显示
                                position: 'top',//柱形上方
                                textStyle: { //数值样式
                                    color: '#8A2BE2'
                                }
                            }
                        }
                    },
                    {
                        name:'未盘',
                        type:'bar',
                        data:assetsTypeValueList2,
                        label: {
                            normal: {
                                show: true,//开启显示
                                position: 'top',//柱形上方
                                textStyle: { //数值样式
                                    color: '#8A2BE2'
                                }
                            }
                        }
                    }
                ]
            };
            barChart.setOption(baroption);
            window.onresize = barChart.resize;
        });

        var prefix = ctx + "assets/check";
        var checkFlagDatas = [[${@dict.getType('check_flag')}]];
        var assetsTypeDatas = [[${@dict.getType('assets_type')}]];
        var assetsStatusDatas = [[${@dict.getType('assets_status')}]];
        var ischeckAllFinash = [[${assetsCheck.checkStatus}]]
        $("#form-check-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-check-edit').serialize());
            }
        }

        function checkit(value) {
            var url = '/assets/check/checkit/'+value;
            var options = {
                title: '盘点',
                width: "200",
                height: "220",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var body = $.modal.getChildFrame(index);
            var checkDetailId = body.find('#checkDetailId').val();
            var checkflag = body.find('#checkflag').val();
            var checkid = [[${assetsCheck.checkId}]];
            var json = "checkDetailId="+checkDetailId+"&checkFlag="+checkflag+"&checkId="+checkid;
            $.operate.save(prefix + "/checkSave", json);
            $.modal.close(index);
            $.table.refresh();
        }

        $("input[name='checkTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        function exportReport() {
            var checkid = [[${assetsCheck.checkId}]]
            $.modal.confirm("确认要下载盘点报告吗?", function() {
                var assetsTypeimg = barChart.getDataURL({pixelRatio:2});
                var checkinfoimg = pieChart_assets.getDataURL({pixelRatio:2});
                var data = { "ids": checkid,"assetsTypeimg": assetsTypeimg,"checkinfoimg": checkinfoimg };
                $.post(table.options.exportReport, data, function(result) {
                    if (result.code == web_status.SUCCESS) {
                        window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                    } else if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                    $.modal.closeLoading();
                });
            });
        }


        $(function() {
            var options = {
                url: prefix + "/dataillist",
//                data: [[${assetsCheck.assetsCheckDetailList}]],
                exportReport: prefix + "/exportReport",
                pagination: true,
                showSearch: true,
                showRefresh: true,
                showToggle: false,
                showColumns: false,
//                sidePagination: "client",
                sortName: "checkFlag",                         // 排序列名称
                sortOrder: "asc",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'checkDetailId',
                    title: '',
                    visible: false
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'assetsId',
                    align: 'left',
                    title: '资产编号',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<span>%s</span>", value);
                        return html;
                    }
                },
                {
                    field: 'checkFlag',
                    align: 'left',
                    title: '是否盘点',
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("assetsCheckDetailList[%s].checkFlag", index);
                        return $.common.dictToSpan(checkFlagDatas, value, name);
                    }
                },
                {
                    field: 'assetsType',
                    align: 'left',
                    title: '资产类别',
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("assetsCheckDetailList[%s].assetsType", index);
                        return $.common.dictToSpan(assetsTypeDatas, value, name);
                    }
                },
                {
                    field: 'assetsName',
                    align: 'left',
                    title: '资产名称',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<span>%s</span>", value);
                        return html;
                    }
                },

                {
                    field: 'assetsStatus',
                    align: 'left',
                    title: '资产状态',
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("assetsCheckDetailList[%s].assetsStatus", index);
                        return $.common.dictToSpan(assetsStatusDatas, value, name);
                    }
                },
                {
                    field: 'assetsModel',
                    align: 'left',
                    title: '规格型号',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<span>%s</span>", value);
                        return html;
                    }
                },

                {
                    field: 'assetsSn',
                    align: 'left',
                    title: 'SN号',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<span>%s</span>", value);
                        return html;
                    }
                },

                {
                    field: 'deptName',
                    align: 'left',
                    title: '部门名称',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<span>%s</span>", value);
                        return html;
                    }
                },

                {
                    field: 'userName',
                    align: 'left',
                    title: '使用人名称',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<span>%s</span>", value);
                        return html;
                    }
                },
                    {
                        field: 'checkTime',
                        align: 'left',
                        title: '盘点时间',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<span>%s</span>", value);
                            return html;
                        }
                    },
                    {
                        field: 'checkUserName',
                        align: 'left',
                        title: '盘点人名称',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<span>%s</span>", value);
                            return html;
                        }
                    },

                {
                    title: '操作',
                    align: 'left',
                    formatter: function(value, row, index) {
                        if (row.checkFlag != 1 && ischeckAllFinash != '2') {
                            //盘点任务未完成或本资产未盘点
                            return '<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="checkit(\'' + row.checkDetailId + '\')"><i class="fa fa-hand-paper-o"></i>手工盘点</a>';

                        }
                    }
                }]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>